<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Load Google JQuery UI Theme from CDN -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/sunny/jquery-ui.css" type="text/css" />

<!-- Load Google AJAX API JQuery from CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/static/jquery.form.js"></script>
<style>
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#books-contain { width: 350px; margin: 20px 0; }
		div#books-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#books-contain table td, div#books-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>	
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function(){
	    var options = { 
        target:        '#response',   // target element(s) to be updated with server response 
        success:       showResponse  // post-submit callback 
		};
	   
		//JQuery UI Tabs
		$(function() {
			$("#tabs").tabs();
		});
        // bind 'myForm' and provide a simple callback function 
			$('#BookCheckinForm').ajaxForm(options);
	  });
	
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
  $("#response").animate({ 
      width: "70%",
      opacity: 0.7,
      fontSize: "1em",
      borderWidth: "10px"
    }, 1000 );
}

//]]>
</script> 

</head>
<!-- Tabs Layout Defined-->
<body>

<div id="AddBookContainer">
  
<div id="tabs">
	  <ul>
		  <li><a href="#addBook" title="addBook">Add Book</a></li>
		  <li><a href="#libraryGrid" title="libraryGrid"><a href="/alt">Library</a></a></li>
		  <li><a href="{{ url }}" title="login">{{ url_linktext }}:{{username}}</a></li>
	  </ul>
	

	  <!-- Start Add Book -->

	  <div id="addBook">
		<div id="dialog-form" title="Add Book">
			<p class="validateTips">All form fields are required.</p>
			<form id="BookCheckinForm" action="/submit_form" method="post">
			<fieldset>
				<label for="title">Title</label>
				<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
				<label for="author">Author</label>
				<input type="text" name="author" id="author" value="" class="text ui-widget-content ui-corner-all" />
				<label for="copyright">Copyright</label>
				<input type="copyright" name="copyright" id="copyright" value="" class="text ui-widget-content ui-corner-all" />
				<button id="submit">Create New Book</button>
			</fieldset>
			</form>
			<div id="response"></div>
		  </div>
		</div>
	  <!-- End Add Book -->
	  <div id="libraryGrid"></div>
	  <div id="{{ url }}"></div>
	  
</div>
<!-- End JQuery Tabs-->
</div>
<!-- End AddBookContainer-->
</body>
</html>
